<template>
  <div class="three-box"></div>
</template>

<script setup>
import {
  Scene,
  WebGLRenderer,
  PerspectiveCamera,
  LineBasicMaterial,
  Vector3,
  BufferGeometry,
  Line
} from "three";
import { onMounted } from "vue";

const renderer = new WebGLRenderer();

onMounted(() => {
  const dom = document.querySelector(".three-box");
  console.log("dom======>", dom, dom.offsetWidth, dom.offsetHeight);
  renderer.setSize(dom.offsetWidth, dom.offsetHeight);

  dom.appendChild(renderer.domElement);

  const camera = new PerspectiveCamera(
    45,
    dom.offsetWidth / dom.offsetHeight,
    1,
    500
  );

  camera.position.set(0, 0, 100);
  camera.lookAt(0, 0, 0);

  const scene = new Scene();

  const material = new LineBasicMaterial({ color: 0x0000ff });

  const points = [];
  points.push(new Vector3(0, 0, 0));
  points.push(new Vector3(0, 10, 30));
  points.push(new Vector3(10, 0, 0));

  const geometry = new BufferGeometry().setFromPoints(points);

  const line = new Line(geometry, material);

  scene.add(line);

  renderer.render(scene, camera);
});
</script>

<style lang="less" scoped>
.three-box {
  width: 100%;
  height: 100vh;
}
</style>
